<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<div class="container" id="content">
		<section class="content-header">
			<h1>
				<i class="fa fa-users"></i> <strong>团队信息管理</strong>
			</h1>
			<ol class="breadcrumb">
				<li><a href="#"><i class="fa fa-home "></i>Home</a></li>
				<li>团队信息管理</li>
				<li class="active">科级信息管理</li>
			</ol>
		</section>
		<!-- Main content -->
		<section class="content">
			<div class="box box-info">
				<div class="box-header with-border">
					<i class="fa fa-th-list"></i>
					<h4 class="box-title">科级信息管理</h4>
				</div>
				<div class="box-body">
					<div class="form-inline">
						<div class="input-group">
							<input type="text" id="keyword" class="form-control"
								placeholder="search..." /> <span class="input-group-btn">
								<button type="button" class="btn btn-info searchBtn">查询</button>
								<button type="button" name="reset" id="reset-btn"
									class="btn btn-info resetBtn">撤消</button>
							</span>
						</div>
						<button type="button" class="btn btn-danger pull-right areaBtn">片区配置</button>
						<button type="button" class="btn btn-info pull-right editBtn">编辑</button>
						<button type="button" class="btn btn-info pull-right deleteBtn">删除</button>
						<button type="button" class="btn btn-info pull-right addBtn">添加</button>
					</div>
				</div>
				<div class="box box-body">
					<table width="100%" id="sectionTable"
						class="mytable dataTable table-bordered text-center table-striped table-hover"
						cellspacing="0">
						<thead>
							<tr>
								<th width="10%">序号</th>
								<th width="15%"><input type="checkbox" id="checkAll" /></th>
								<th width="25%">科室名称</th>
								<th width="25%">科长</th>
								<th width="25%">所属部门</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</section>
		<!--科级属性添加弹窗-->
		<div class="modal" id="sectionModal">
			<div class="modal-dialog" role="dialog">
				<div class="modal-content">
					<form id="sectionForm">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<h4 class="modal-title">
								<strong>科级属性</strong>
							</h4>
						</div>
						<div class="modal-body">
							<input class="hidden" id="id" name="id" />
							<div class="form-horizontal">
								<div class="row">
									<div class="form-group">
										<label class="col-sm-2 control-label">科室名称</label>
										<div class="col-sm-4">
											<div class="col-md-11">
												<input class="form-control" type="text" id="sectionName"
													name="sectionName" datatype="*" nullmsg="名称" />
											</div>
											<div class="col-md-1">
												<span style="color: #F00; fontsize: 30px">*</span>
											</div>
										</div>
										<label class="col-sm-2 control-label">所属部门</label>
										<div class="col-sm-4">
											<div class="col-md-11">
												<select class="form-control" id="superior" name="superior"
													datatype="*" nullmsg="选择片区">
													<option></option>
													<option th:each="superior:${superiors}"
														th:text="${superior.title}"></option>
												</select>
											</div>
											<div class="col-md-1">
												<span style="color: #F00; fontsize: 30px">*</span>
											</div>

										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">科长</label>
										<div class="col-sm-4">
											<div class="col-md-11">
												<select class="form-control" id="chief" name="chief"
													datatype="*,*1-100,t" nullmsg="请选择科长" style="width: 100%">
													<option></option>
													<option th:each="user:${chiefs}"
														th:value="${user.id}" th:text="${user.empLogin.name}"></option>
												</select>
											</div>
											<div class="col-md-1">
												<span style="color: #F00; fontsize: 30px">*</span>
											</div>
										</div>

									</div>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">返回</button>
								<button type="button" class="btn btn-primary saveBtn">保存</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!--片区配置弹窗-->
		<div class="modal" id="areaModal">
			<div class="modal-dialog" role="dialog" style="width: 80%">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">
							<strong id="sectionshow">科室片区配置</strong>
						</h4>
					</div>
					<div class="modal-body"
						style="height: 450px; overflow-x: hidden; overflow-y: auto;">
						<input class="hidden" id="sectionId" name="sectionId" /> <input
							class="hidden" id="superior" name="superior" />
						<div class="form-horizontal">
							<div class="row">
							    <div class="col-md-6">
									<div class="box-header with-border">
										<i class="fa fa-th-list"></i>
										<h4 class="box-title">已配置片区</h4>
									</div>
									<div class="box-body">
										<table id="selectTable"
											class="mytable dataTable table-bordered text-center table-striped table-hover"
											cellspacing="0" width="100%">
											<thead>
												<tr>
													<th width="10%">序号</th>
													<th width="10%">操作</th>
													<th width="40%">片区编号</th>
													<th width="40%">片区名称</th>
												</tr>
											</thead>
											<tbody>

											</tbody>
										</table>
									</div>
								</div>
								<div class="col-md-6">
									<div class="box-header with-border">
										<i class="fa fa-cubes"></i>
										<h4 class="box-title">片区信息</h4>
									</div>
									<div class="box-body">
										<table id="noSelectTable"
											class="mytable dataTable table-bordered text-center table-striped table-hover"
											cellspacing="0" width="100%">
											<thead>
												<tr>
													<th width="10%">序号</th>
													<th width="10%">操作</th>
													<th width="40%">片区编号</th>
													<th width="40%">片区名称</th>
												</tr>
											</thead>
											<tbody>

											</tbody>
										</table>
									</div>
								</div>
								
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">返回</button>
						</div>
					</div>

				</div>
			</div>
		</div>

		<script th:src="@{/section/section-index.js}"></script>
	</div>

</body>
</html>